<template>
  <div>
    <div class="container" style=" margin-top:8%;">
      <div class="panel margin-big-top">
        <div class="text-center">
          <br>
          <h2 class="padding-top">404错误！抱歉您要找的页面不存在 </h2>
          <div class="">
            <div class="float-left">
              <img src="http://www.pintuer.com/images/ds-1.gif">
              <div class="alert"> 卧槽！页面不见了！</div>
            </div>
            <div class="float-right">
              <img src="http://www.pintuer.com/images/ds-2.png" width="260">
            </div>
          </div>
          <div class="padding-big">
            <!--<a href="" class="button bg-yellow"></a>-->
            <router-link class="button bg-yellow" to="/Index">返回首页</router-link>
            <!--<a href="index2.html" class="button">看看第二个404错误演示</a>-->
            <span>还有 <span class="time">{{time}}</span> 秒后自动返回首页</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Other',
    data() {
      return {
        time: 0
      };
    },
    methods: {
      countDown() {
        let that = this;
        that.time--;
      }
    },
    mounted() {
      let that = this;
      that.time = 3;
      setInterval(that.countDown, 1000);
    },
    watch: {
      'time': function (newVal) {
        if (newVal === 0) {
          this.$router.push('/index');
        }
      }
    }
  };
</script>
<style scoped>
  .container {
    width: 1200px;
    display: block;
    margin: 0 auto;
  }

  .margin-big-top {
    margin-top: 20px;
  }

  .panel {
    border: solid 1px #ddd;
    border-radius: 4px;
  }

  .text-center {
    text-align: center;
  }

  .padding-top {
    padding-top: 10px;
  }

  h2, .h2 {
    font-size: 20px;
  }

  .float-left {
    float: left !important;
  }

  img {
    border: 0;
    vertical-align: bottom;
  }

  .alert {
    border-radius: 5px;
    padding: 15px;
    border: solid 1px #ddd;
    background-color: #f5f5f5;
  }

  .float-right {
    float: right !important;
  }

  .padding-big {
    padding: 20px;
  }

  .panel .bg-yellow {
    color: #fff;
  }

  .button .bg-yellow {
    border-color: #f60;
  }

  a {
    text-decoration: none;
    display: block;
  }

  .button {
    border: solid 1px #ddd;
    background-color: #f60;;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 15px;
    margin: 0;
    display: inline-block;
    line-height: 20px;
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;
  }
  .time{
    color: #f60;
  }
</style>
